﻿<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script language="javascript" src="<%=Url.Content("~/Scripts/jquery-1.4.2.min.js")%>"></script>
<style>
   
    
    .parser:hover
    {
        border:2px dotted #aaaaff !important;
    }
    
    .parser.selected
    {
        border:2px dotted blue !important;
    }
        
    .parser
    {
        cursor:pointer;
    }
    
    .cms-highlighted
    {
        background-color:#BEEBFF;
    }
    
    .cms-tag-id
    {
        font-size:9pt;
        background-color:#ffff99;
        border:1px solid gray;
        display:inline;
        color:Black;
        font-weight:normal;
        letter-spacing:normal;
        padding:1px;
        padding:1px;
        margin-top:-20px;
        position:absolute;
        
    }
    
    .cms-control-title
    {
        position:absolute;
        background-color:#ffff99;
        border:1px solid gray;
        font-family:Tahoma;
        color:gray;
        font-weight:normal;
        cursor:pointer;
        font-size:7pt;
    }
    
    input.cms-editor
    {
        border:none;
    }
    
    .cms-context-menu-item
    {
        font-size:10pt;
        border:1px solid #ddd;
        background-color:#ddd;
        cursor:pointer;
        padding:1px;
    }
    
    .cms-context-menu-item:hover
    {
        font-size:10pt;
        border:1px solid #99DEFD;
        background-color:#BEEBFF;
        cursor:pointer;
        padding:1px;
    }
</style>
<container id="cms-template-container">
<%=((string)this.ViewData["Template"] ?? "").Replace("{~}", Url.Content("~/")) %>
</container>
<div id="cms-context-menu" style="display:none; position:absolute; padding:1px; background-color:#ddd; border:1px solid #555;width:150px;">
    <div class="cms-context-menu-item" id="cmsInsertBefore">Insert Before</div>
    <div class="cms-context-menu-item" id="cmsInsertAfter">Insert After</div>
    <div class="cms-context-menu-item" id="cmsInsertAsChild">Insert As Child</div>
    <div class="cms-context-menu-item" id="cmsInsertAsParent">Insert As Parent</div>
    <div style="border:1px solid silver"></div>
    <div class="cms-context-menu-item" id="cmsDelete">Delete</div>
</div>

</div>
<script language="javascript">
    var parser;

    $("#cmsInsertBefore").click(function () {
        var index = parser.attr("index");
        window.parent.insertParser(index, addingParser, "before");
    });

    $("#cmsInsertAfter").click(function () {
        var index = parser.attr("index");
        window.parent.insertParser(index, addingParser, "after");
    });

    $("#cmsDelete").click(function () {
        var index = parser.attr("index");
        window.parent.deleteParser(index);
    });

    var cmsParserClicked = false;
    $(document).ready(function () {

        //setStyles();

        //$(".parser").live("click", function (e) {
        //selectParser($(this), e);
        //});

        $("body").disableSelection();

        $(document).bind("contextmenu", function (e) {
            return false;
        });

       
        $(document).click(function (e) {
            $("#cms-context-menu").hide();
            cmsParserClicked = false;
        });
        /*
        $("parser").live("contextmenu", function (e) {
        if (!addingParser) {
        $("#cmsInsertBefore").hide();
        $("#cmsInsertAfter").hide();
        $("#cmsInsertAsChild").hide();
        $("#cmsInsertAsParent").hide();
        } else {
        $("#cmsInsertBefore").show();
        $("#cmsInsertAfter").show();
        $("#cmsInsertAsChild").show();
        $("#cmsInsertAsParent").show();
        }
        //
        //  ok, show the menu
        selectParser($(this));
        $('#cms-context-menu').css({
        top: e.pageY + 'px',
        left: e.pageX + 'px'
        }).show();
        return false;
        });*/

    });

    function clearTagSelection() {
        //
        //
        //  ok we can select this one
        $("*").removeClass("cms-highlighted");
        $(".cms-tag-id").remove();
    }

    $.fn.disableSelection = function () {
        $(this).attr('unselectable', 'on')
           .css('-moz-user-select', 'none')
           .each(function () {
               this.onselectstart = function () { return false; };
           });
    };

       function updateParserContents(content) {
           
               $("#cms-group").remove();
        $("#cms-label").remove();
        $("#cms-template-container").html(content);
        setupEventsAndStyles();
        if (selectedControlIndex >= 0) {
            $(".cms-control[cms-index=" + selectedControlIndex + "]").first().click();
        }
    }

    var addingParser = window.parent.getAddingParser();

    function addParser(name) {
        //
        //  ok, we need to
        addingParser = name;
    }

    function stopAddingParser(content) {
        addingParser = null;
    }


</script>


 <script language="javascript">
     var selectedControlIndex = -1;
     var selectedChildControlName  = "";
     $(document).ready(function () {

         setupEventsAndStyles();

         $(document).click(function () {
             $("#cms-groupparent").remove();
             $("#cms-labelparent").remove();
             $("#cms-groupchild").remove();
             $("#cms-labelchild").remove();

             selectedControlIndex = -1;
             selectedChildControlName = "";
         });

         $(document).keypress(function (e) {
             if (e.which == 13) {
                 //  we pressed enter we want to insert a br
                 replaceHighlighedWithParser("<br/>", '<%=this.ViewData["Id"] %>', "Insert Before");
             }
         });

         $(window).resize(function () {
             $("#cms-groupparent").remove();
             $("#cms-labelparent").remove();
             $("#cms-groupchild").remove();
             $("#cms-labelchild").remove();

             if (selectedControlIndex >= 0 && (selectedChildControlName == null || selectedChildControlName == "")) {
                 $(".cms-control[cms-index=" + selectedControlIndex + "]").first().click();
             }
             else if (selectedControlIndex >= 0 && (selectedChildControlName != null && selectedChildControlName != "")) {
                 $(".cms-control[cms-index=" + selectedControlIndex + "][cms-childcontrol='" + selectedChildControlName + "'").first().click();
             }
         });
     });

     function setupEventsAndStyles() {

         window.parent.MethodWorx.CMS.showPleaseWait(true);

         $("*").click(function (e) {
             var pi = $(this).attr("_pi");
             if (pi != "" && pi != null) {
                 clearParserSelection();

                 var c = $(this).attr("class")
                 if (c != null && c != "")
                     c = "." + c;

                 $(this).addClass("cms-highlighted");

                 $(this).prepend("<div class=\"cms-tag-id\">" + this.tagName.toLowerCase() + "" + c + "<br/></div>");
                 e.preventDefault();
                 e.stopPropagation();
             }
         });


         $("*[cms-control='true']").addClass("cms-control");

         $(".cms-control").css("cursor", "pointer");
         $(".cms-control").attr("unselectable", "true");


         $(".cms-control").click(function (e) {
             if ($(this).attr("_pi") == null || $(this).attr("_pi") == "")
                 selectParser(this, e);
         });


            

         window.parent.MethodWorx.CMS.hidePleaseWait();
     }

     function clearParserSelection() {
         $("#cms-groupparent").remove();
         $("#cms-labelparent").remove();
         $("#cms-groupchild").remove();
         $("#cms-labelchild").remove();

         clearTagSelection();
     }

     function selectParser(t, e) {
         clearParserSelection();

         var index = $(t).attr("cms-index");
         var name = $(t).attr("cms-name");
         var controls = $(".cms-control[cms-index=" + index + "]");
         var childControl = $(t).attr("cms-childcontrol");
         selectedControlIndex = index;

         boxElements(controls, "parent", name, false);
         if (childControl != null && childControl != "") {
             var controls = $(".cms-control[cms-index=" + index + "][cms-childcontrol='" + childControl + "']");
             boxElements(controls, "child", childControl, true);
         }

         window.parent.setProperties(index);

         e.preventDefault();
         e.stopPropagation();
     }


     function boxElements(controls, id, text, placeTop) {
         var left = 9999999;
         var top = 9999999;
         var right = 0;
         var bottom = 0;
         controls.each(function () {
             var l = $(this).offset().left;
             var t = $(this).offset().top;
             var r = l + $(this).width();
             var b = t + $(this).height();

             if (l < left)
                 left = l;

             if (t < top)
                 top = t;
             if (b > bottom)
                 bottom = b;
             if (r > right)
                 right = r;
         });

         $("body").append("<div id=\"cms-group" + id + "\" style=\"left:" + left + "px;top:" + top + "px;width:" + (right - left) + "px;height:" + (bottom - top) + "px;position:absolute;border:1px dotted blue;z-index:9999999\"></div>");
         if (!placeTop)
             $("body").append("<div id=\"cms-label" + id + "\" style=\"left:" + (left + 2) + "px;top:" + (bottom + 2) + "px;position:absolute;border:1px solid silver;background-color:#FFEC8B;z-index:9999999\">" + text + "</div>");
         else
             $("body").append("<div id=\"cms-label" + id + "\" style=\"left:" + (left + 2) + "px;top:" + (top) + "px;position:absolute;border:1px solid silver;background-color:#FFEC8B;z-index:9999999\">" + text + "</div>");
     }

     function getHighlighted() {
         var e = $(".cms-highlighted").first();
         if (e != null && e.length > 0)
             return e.attr("_pi");
         else
             return null;
     }


     function getHighlighted() {
         var e = $(".cms-highlighted").first();
         if (e != null && e.length > 0)
             return e.attr("_pi");
         else
             return null;
     }

     function replaceHighlighedWithParser(parser, id, initializer) 
     {
        var e = getHighlighted();
        if (e != null) {
            //  
            //  ok, here we go
            $.getJSON("<%=Url.Content("~/Application")%>/Template/ReplaceParser", { id: id, pi: e, parser: parser, initializer: initializer },
                    function (obj) {
                        //  otherwise, sort out the item
                        if (obj.Changed) {
                            updateParserContents(obj.Content);
                        }
                        else {
                            window.location.href =
                            window.location.href;
                        }
                        window.parent.refreshCode();
                    });
        }
        else {
            //var p = selectedControlIndex
            if (selectedControlIndex != null) {
                //  
                //  ok, here we go
                $.getJSON("<%=Url.Content("~/Application")%>/Template/ReplaceParser", { id: id, index: selectedControlIndex, parser: parser, initializer: initializer },
                    function (obj) {
                        //  otherwise, sort out the item
                        if (obj.Changed) {
                            updateParserContents(obj.Content);
                        }
                        else {
                            window.location.href =
                            window.location.href;
                        }
                        window.parent.refreshCode();
                    });
            }
        }
        }

        function deleteHighlighted(id) {
            var e = getHighlighted();
            if (e != null) {
                //  
                //  ok, here we go
                $.getJSON("<%=Url.Content("~/Application")%>/Template/DeleteElement", { id: id, pi: e },
                    function (obj) {
                        //  otherwise, sort out the item
                        //if (obj.Deleted) {
                            
                        //}
                        //else {
                            window.location.href =
                            window.location.href;
                        //}
                        window.parent.refreshCode();
                    });
            }
            else {
                //var p = selectedControlIndex
                if (selectedControlIndex != null) {
                    $.getJSON("<%=Url.Content("~/Application")%>/Template/DeleteParser", { id: id, index: selectedControlIndex },
                    function (obj) {
                        //  otherwise, sort out the item
                        //if (obj.Deleted) {
                            //updateParserContents(obj.Content);
                        //}
                        //else {
                            window.location.href =
                            window.location.href;
                        //}
                        window.parent.refreshCode();
                    });
                }
            }
        }
            
</script>
